window.addEventListener('load', leftNav, false);

function leftNav() {
  appendUl('leftNav', 'outerUL'); 
  appendLiA('outerUL', 'home', 'home.html', 'Home');
  appendLiA('outerUL', 'portfolio', 'portfolio.html', 'Portfolio');
  appendUl('portfolio', 'portfolioUL'); 
  appendLiA('portfolioUL', 'thumbnails', 'thumbnails.html', 'Thumbnails');
  appendLiA('portfolioUL', 'slideShow', 'slideShow.html', 'Slide Show');
  appendLiA('outerUL', 'tagCloud', 'tagCloud.html', 'Tag Cloud'); 
  
  function appendUl(append_to_id, ul_id) {
  /* 
    Creates a <ul> element whose ID is ul_id. This <ul> element is then 
    appended to the element whose ID is append_to_id.
  */
    var ul = document.createElement('ul');
    ul.id = ul_id;
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(ul);
  } // appendUl
	
  function appendLiA(append_to_id, li_id, a_href, a_text) {
  /* 
    Creates two elements, an <a> element and an <li> element. The <a> element's
    href attribute is set to a_href and its inner text to a_text. The <li> 
    element's ID becomes li_id and contains the <a> element. The <li><a> 
    elements are then appended to the element whose ID is append_to_id.
  */
    var a = document.createElement('a');
    a.href = a_href;
    a.textContent = a_text;
	  
    var li = document.createElement('li');
    li.id = li_id;
    li.appendChild(a);
	  
    var appendTo = document.getElementById(append_to_id);
    appendTo.appendChild(li);
  } // appendLiA 	 
} // leftNav